<template>
	<div style="height: 100%;width:1700px;color: black">
		<a-layout style="width:1700px;height: 100%;">
			<a-layout-content
					style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;left: 15px;background: #ffffff !important;">
				<right-top icon="2.png" text="规则详情">
					<a-tabs default-active-key="1" size="small" style="position: absolute;right: 72%;top: 22px;font-weight: 400;"
					        @change="callback">
						<a-tab-pane key="1" :tab="rulemodule"></a-tab-pane>
					</a-tabs>
				</right-top>
				<div v-if="change==1" class="right-content">
					<a-form-model :model="form" layout="inline" style="margin-left: 13%">
						<a-row style="margin-top: 20px;">
							<a-col :span="15">
								<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" label="规则名称" style="width: 100%">
									<a-input v-model="ruleInfo.ruleName" class="inputBox" readOnly style=""/>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row style="">
							<a-col :span="15" class="noborder">
								<a-form-item :label-col="{span:4}"
								             :wrapper-col="{span:18}"
								             label="媒体类型">
									<a-checkbox-group v-model="ruleInfo.mediaType" disabled
									                  name="contractClass" style="width: 200%;margin-top: -2%;margin-left: 1%;">
										<a-row>
											<a-checkbox-group v-model="ruleInfo.mediaType" disabled>

												<a-checkbox v-for="(item,i) in media_type" v-if="i<8" :value="item">
													{{ media_type[i] }}
												</a-checkbox>
											</a-checkbox-group>

										</a-row>
										<a-row v-show="media_type.length >= 8" style="position: relative;top: 0px;margin-left: -9.3%;">
											<a-col :push="2" :span="21">
												<a-checkbox-group v-model="ruleInfo.mediaType" disabled>
													<a-checkbox v-for="(item,i) in media_type" v-if="i>=8" :value="item">
														{{ media_type[i] }}
													</a-checkbox>
												</a-checkbox-group>
											</a-col>
										</a-row>
									</a-checkbox-group>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="15" style="margin-top: 3%;">
								<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" label="层级深度" style="width: 100%">
									<a-input v-model="ruleInfo.depth" class="inputBox" readOnly value="选择媒体类型">选择媒体类型
									</a-input>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row v-if="ruleInfo.advance ==1" style="margin-bottom: 5%;margin-left: -4%">
							<a-col :span="2" style="margin-left: 8%;">
								<span style="">规则范围：</span>
							</a-col>
							<a-col :span="15" style="margin-left: -2.5%;">
								<a-textarea v-model="ruleInfo.ruleRange" :auto-size="{ minRows: 4, maxRows: 4 }" :rows="4" readOnly/>
							</a-col>
						</a-row>
						<a-row style="margin-left: 4%;">
							<a-col :span="2" style="margin-left: 0%;">
								<span style="color: black">关键词组：</span>
							</a-col>
							<a-col :span="21" style="margin-left: -2.5%;overflow: auto;max-height: 220px;background: #F7F7F7;">
								<a-row v-for="(item,i) in ruleInfo.keywordsList" :style="ruleInfo.keywordsList == null ? 'display: none':''"
								       style="margin-left: 0%;width: 100%">
									<a-col :span="20" style="margin-left: 0%;padding: 10px 10px 10px 10px;">
										<a-textarea :auto-size="{ minRows: 4, maxRows: 4 }" :rows="4" :value="item" readOnly/>
									</a-col>
								</a-row>

								<a-row :style="ruleInfo.keywordsList == null ? '':'display: none'" style="margin-left: 0%;width: 100%;">
									<a-col :span="20" style="margin-left: 0%;padding: 10px 10px 10px 10px;">
										<a-textarea :auto-size="{ minRows: 4, maxRows: 4 }" :rows="4" readOnly/>
									</a-col>
								</a-row>
							</a-col>
						</a-row>
						<a-row style="margin-top: 3%;margin-left: -4%">
							<a-col :span="2" style="margin-left: 9%;">
								<span style="">歧义词：</span>
							</a-col>
							<a-col :span="15" style="margin-left: -3.5%;">
								<a-textarea v-model="ruleInfo.ambiguousWords" :auto-size="{ minRows: 4, maxRows: 4 }" :rows="4"
								            readOnly/>
							</a-col>
						</a-row>

						<a-row style="margin-top: 5%;margin-left: -4%">
							<a-col :span="2" style="margin-left: 9%;">
								<span style="">排除词：</span>
							</a-col>
							<a-col :span="15" style="margin-left: -3.5%">
								<a-textarea v-model="ruleInfo.excludedWords" :auto-size="{ minRows: 4, maxRows: 4 }" :rows="4"
								            readOnly/>
							</a-col>
						</a-row>
						<a-row style="margin-top: 5%;margin-left: -4%">
							<a-col :span="2" style="margin-left: 9%;">
								<span style="">负面词：</span>
							</a-col>
							<a-col :span="15" style="margin-left: -3.5%">
								<a-textarea v-model="ruleInfo.negativeWords" :auto-size="{ minRows: 4, maxRows: 4 }" :rows="4"
								            readOnly/>
							</a-col>
						</a-row>
						<a-row style="">
							<a-col :span="15">
								<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" label="目标站点" style="width: 100%">
									<a-input v-model="ruleInfo.targetWebsite" class="inputBox" readOnly/>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row style="">
							<a-col :span="15">
								<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" label="排除站点" style="width: 100%">
									<a-input v-model="ruleInfo.outSite" class="inputBox" readOnly/>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row style="margin-top: 6%;padding-left: 4%">
							<a-col :span="9">
								<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" label="检测范围" style="width: 100%">
									<a-radio-group v-model="ruleInfo.testRange" disabled name="radioGroup">
										<a-radio :value="1">
											全文
										</a-radio>
										<a-radio :value="2">
											段落
										</a-radio>
										<a-radio :value="3">
											自然句
										</a-radio>
									</a-radio-group>
								</a-form-model-item>
							</a-col>
							<a-col :span="9">
								<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" label="可见性" style="width: 100%">
									<a-radio-group v-model="ruleInfo.isShow" disabled name="radioGroup">
										<a-radio :value="1">
											系统
										</a-radio>
										<a-radio :value="2">
											仅自己
										</a-radio>
									</a-radio-group>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row style="margin-left: 4%">
							<a-col :span="8">
								<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" label="图像识别" style="width: 100%">
									<a-radio-group v-model="ruleInfo.imageRecognition" disabled name="radioGroup">
										<a-radio :value="1">
											启用
										</a-radio>
										<a-radio :value="2">
											不启用
										</a-radio>
									</a-radio-group>
								</a-form-model-item>
							</a-col>
						</a-row>

						<a-row style="margin-left: 4%">
							<a-col :span="20" style="text-align: center">
								<a-button style="margin-right: 10px;color: black" @click="goHomePage">返回</a-button>
							</a-col>
						</a-row>
					</a-form-model>
				</div>

			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'
import {detail} from "@/api/generalDetection/generalDetetion";
import {getMediaTypeList} from '@/api/generalDetection/generalDetetionResults'

export default {
	name: "generalRulesInfo",
	components: {
		left,
		rightTop
	},
	data() {
		return {
			rulenames: undefined,
			commandid_info: undefined,
			rulemodule: undefined,
			change: 1,
			listData: [],
			labelCol: {span: 10},
			wrapperCol: {span: 14},
			media_type: [],
			form: {
				name: '',
				region: undefined,
				date1: undefined,
				delivery: false,
				type: [],
				resource: '',
				desc: '',
			},
			ruleInfo: {
				id: undefined,
				flag: undefined,
				ruleName: undefined,
				mediaType: undefined,
				targetWebsite: undefined,
				outSite: undefined,
				depth: undefined,
				ruleRange: undefined,
				keywordsList: [],
				ambiguousWords: undefined,
				excludedWords: undefined,
				negativeWords: undefined,
				testRange: undefined,
				imageRecognition: undefined,
				warningPush: undefined,
				subscribe: undefined,
				advance: undefined, // 是否高级模式
				isShow: undefined,

			},
		}

	},
	props: {
		rule: {
			type: Number,
		},
		// 父类this
		parent: {
			type: Object,
		}
	},
	methods: {

		onChange(checked) {
			console.log(`a-switch to ${checked}`);
		},
		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;
			}
		},
		onSubmit() {
			console.log('submit!', this.form);
		},
		goHomePage() {
			this.$emit("gohome", false, this.commandid_info, this.rulenames)

		},
	},
	mounted() {
		// 获取媒体类型
		getMediaTypeList().then(res => {
			let samples = res.data;
			for (let i = 0; i < samples.length; i++) {
				this.media_type.push(samples[i].mediaName)
			}
		});

		detail({
			id: this.rule
		}).then(res => {
			let data = res.data;
			this.ruleInfo = data;
			this.commandid_info = data.commandId
			this.rulenames = data.ruleName
			if (this.ruleInfo.advance == 1) {
				this.rulemodule = '高级模式'
			}
			if (this.ruleInfo.advance == 0) {
				this.rulemodule = '标准模式'
			}
			console.log('ruleInfo=================', this.ruleInfo)
		})
	},
	created() {

	},
}
</script>

<style lang="scss" scoped>


.inputBox {
	height: 40px;
}

/deep/ .ant-select-selection--single {
	height: 40px;
}

/deep/ .ant-select-selection__rendered {
	height: 35px;
}

.right-content {
	margin-bottom: 20px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > span {
	color: black;
	font-size: 13px;
	cursor: pointer;
}
</style>
